<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动菜单</title>
<style type="text/css">
*{
 	margin:0; 
 	padding:0
}
body{ 
	font-size:12px; 
}
.title{
font-size:18px;
line-height:50px;
margin-left:100px;}
.one{ 
	margin:10px 0;
}
.one label{ 
	width:100px; 
	float:left; 
	text-align:right;
 	height:20px; 
 	line-height:20px;
}
.one input{
 	border:1px solid #999;
  	height:20px;
}
.two{
 	padding-left:150px;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
	<form name="form">
  		<div class="title">添加商品信息</div>
  		<div class="one">
    		<label for="type">所属类别：</label>
    		<select v-on:change="getPtext">
        		<option v-for="pmenu in menulist" v-bind:value="pmenu.text">
		  			{{pmenu.text}}
				</option>
			</select>
			<select>
				<option v-for="submenu in getSubmenu" v-bind:value="submenu.text">
					{{submenu.text}}
				</option>
			</select>
  		</div>
  		<div class="one">
    		<label for="goodsname">商品名称：</label>
    		<input type="text" name="goodsname"/>
  		</div>
  		<div class="one">
    		<label for="price">会员价：</label>
    		<input type="text" name="price"/>
  		</div>
		<div class="one">
    		<label for="number">商品数量：</label>
    		<input type="text" name="number"/>
  		</div>
  		<div class="two">
    		<input type="submit" value="添加" />
    		<input type="reset" value="重置" />
  		</div>
	</form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
		data:{
            ptext : '数码设备',
			menulist:[{
                text:'数码设备',
                submenu:[
                    {text:'数码相机'},
                    {text:'打印机'},
                    {text:"复印机"},
                ]
            },{
                text:'家用电器',
                submenu:[
                    {text:'电视机'},
                    {text:'电冰箱'},
                    {text:"洗衣机"},
                ]
            },{
                text:'礼品工艺',
                submenu:[
                    {text:'鲜花'},
                    {text:'彩带'},
                    {text:"音乐盒"},
                ]
            }]
    	},
    	methods : {
			getPtext : function(event){//获取主菜单项
            	this.ptext = event.target.value;
     		}
		},
		computed : {
        	getSubmenu : function(){//获取子菜单
            	for(var i = 0; i < this.menulist.length; i++){
                	if(this.menulist[i].text == this.ptext){
                    	return this.menulist[i].submenu;
                	}
            	}
        	}
   		}
    });
</script>

</body>
</html>